import 'package:flutter/material.dart';
import 'package:timeline_tile/timeline_tile.dart';

class TimelineExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Tile Example'),
      ),
      body: ListView(
        children: <Widget>[
          TimelineTile(
            alignment: TimelineAlign.start,
            isFirst: true,
            indicatorStyle: IndicatorStyle(
              width: 40,
              color: Colors.blue,
              padding: const EdgeInsets.all(8),
              iconStyle: IconStyle(
                color: Colors.white,
                iconData: Icons.check,
              ),
            ),
            beforeLineStyle: const LineStyle(
              color: Colors.blue,
              thickness: 6,
            ),
            afterLineStyle: const LineStyle(
              color: Colors.blue,
              thickness: 6,
            ),
            endChild: Container(
              padding: const EdgeInsets.all(20),
              constraints: const BoxConstraints(
                minHeight: 120,
              ),
              color: Colors.blue.withOpacity(0.3),
              child: const Center(
                child: Text('First Event'),
              ),
            ),
          ),
          TimelineTile(
            alignment: TimelineAlign.start,
            indicatorStyle: IndicatorStyle(
              width: 40,
              color: Colors.green,
              padding: EdgeInsets.all(8),
              iconStyle: IconStyle(
                color: Colors.white,
                iconData: Icons.access_time,
              ),
            ),
            beforeLineStyle: const LineStyle(
              color: Colors.green,
              thickness: 6,
            ),
            afterLineStyle: const LineStyle(
              color: Colors.green,
              thickness: 6,
            ),
            endChild: Container(
              padding: const EdgeInsets.all(20),
              constraints: BoxConstraints(
                minHeight: 120,
              ),
              color: Colors.green.withOpacity(0.3),
              child: Center(
                child: Text('Second Event'),
              ),
            ),
          ),
          TimelineTile(
            alignment: TimelineAlign.start,
            isLast: true,
            indicatorStyle: IndicatorStyle(
              width: 40,
              color: Colors.red,
              padding: const EdgeInsets.all(8),
              iconStyle: IconStyle(
                color: Colors.white,
                iconData: Icons.flag,
              ),
            ),
            beforeLineStyle: const LineStyle(
              color: Colors.red,
              thickness: 6,
            ),
            afterLineStyle: LineStyle(
              color: Colors.red,
              thickness: 6,
            ),
            endChild: Container(
              padding: const EdgeInsets.all(20),
              constraints: const BoxConstraints(
                minHeight: 120,
              ),
              color: Colors.red.withOpacity(0.3),
              child: const Center(
                child: Text('Third Event'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
